<template>
  <div class="arena">
    <Header :header="header"></Header>
    <div class="recommend">擂台列表</div>
    <van-collapse v-model="collapse.activename" accordion>
      <van-collapse-item
        v-for="item in collapse.arenalist"
        :key="item.id"
        :title="item.title" :name="item.id">
        <div class="desc">
          <div class="img">
            <img :src="item.img" style="width: 100%; height: auto;" :alt="item.title"/>
          </div>
          <div class="info">
            <div class="info-left">
              <div class="info-left-one">
                <span>擂主：</span>
                <span>{{item.name}}</span>
              </div>
              <div class="info-left-two">
                <span>难度：</span>
                <span>{{item.level}}级</span>
              </div>
              <div class="info-left-three">
                <span>兴趣：</span>
                <span>{{item.interest}}</span>
              </div>
            </div>
            <div class="info-right">
              <div class="info-right-one  van-ellipsis">
                <span>位置：</span>
                <span>{{item.location}}</span>
              </div>
              <div class="info-right-two">
                <span>人数：</span>
                <span>{{item.num}}人</span>
              </div>
              <div class="info-right-three">
                <el-button round type="primary">打擂</el-button>
              </div>
            </div>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <van-dialog
      style="top: 36%"
      v-model="dialog.show"
      title="擂台信息"
      show-cancel-button
    >
      <div class="dialog-content">
        <div class="dialog-content-one">
          <span style="float: left; min-width: 48px;">名称：</span>
          <div style="flex: 1;">
            <el-input v-model="dialog.input" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="dialog-content-two">
          <div class="dialog-content-two-left">
            <span style="float: left;">人数：</span>
            <div style="flex: 1;">
              <el-input-number v-model="dialog.num" :min="1" :max="10" label="描述文字"></el-input-number>
            </div>
          </div>
          <div class="dialog-content-two-right">
            <span style="float: left; min-width: 48px;">难度：</span>
            <div style="flex: 1">
              <el-select v-model="dialog.value" placeholder="请选择">
                <el-option
                  v-for="item in dialog.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="dialog-content-three">
          <el-tag
            :key="tag"
            v-for="tag in dialog.tags"
            closable
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
        </div>
      </div>
    </van-dialog>
    <transition
      appear
      appear-active-class="animated bounceInDown"
    >
      <vue-fab
        size="big"
        mainBtnColor="#DCDCDC"
        autoHideDirection="down"
        @clickMainBtn="clickMainBtn">
        <fab-item
          v-for="item in vuefab"
          :key="item.id"
          :idx="item.id"
          :title="item.title"
          :color="item.color"
          :icon="item.icon"
          @clickItem="clickItem"
        ></fab-item>
      </vue-fab>
    </transition>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Arena',
  components: {
    Header: () => import('Lcomponents/Header')
  },
  data: function () {
    return {
      header: {
        bgcolor: '#228B22',
        search: '输入 城市/兴趣',
        select: {
          options: [{
            value: '选项1',
            label: '2人'
          }, {
            value: '选项2',
            label: '3人'
          }, {
            value: '选项3',
            label: '4人'
          }, {
            value: '选项4',
            label: '5人'
          }],
          value: '选项1'
        }
      },
      collapse: {
        activename: '0',
        arenalist: Array
      },
      dialog: {
        show: false,
        input: '',
        num: 1,
        value: '',
        options: [{
          value: '选项1',
          label: 'S级'
        }, {
          value: '选项2',
          label: 'SS级'
        }, {
          value: '选项3',
          label: 'SSS级'
        }],
        tags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: ''
      },
      vuefab: [
        {
          id: 0,
          icon: 'thumbs_up_down',
          title: '摆擂',
          color: '#B22222'
        }, {
          id: 1,
          icon: 'autorenew',
          title: '刷新',
          color: '#2F4F4F'
        }
      ]
    }
  },
  mounted: function () {
    this.getArenaList()
  },
  activated: function () {
    this.$store.dispatch('changeTabbarState', true)
    this.$store.dispatch('changeTabbarActive', 0)
  },
  methods: {
    clickItem: function (O) {
      console.log(O.idx)
      this.dialog.show = (O.idx === 0)
    },
    clickMainBtn: function () {
      console.log('')
    },
    handleClose: function (tag) {
      this.dialog.tags.splice(this.dialog.tags.indexOf(tag), 1)
    },
    getArenaList: function () {
      axios.get('/static/mock/arena.json')
        .then(this.getArenaListSucc)
    },
    getArenaListSucc: function (res) {
      if (res && res.data && res.data.ret) {
        this.collapse.arenalist = res.data.data.arena_list
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .van-collapse-item >>> .van-cell
    padding: 50px 15px
  .van-collapse-item >>> .van-cell__title
    color: darkred
    font-size: 32px
  .van-collapse-item >>> .van-collapse-item__content
    padding 0 5px 0
  .fab-main-container >>> .fab-size-big[data-v-77282e1a]
    width: 128px
    height: 128px
  .arena
    width: 100%
    height: 93%
    .recommend
      height: 50px
      line-height: 50px
      margin: 5px 0
      padding-left: 5px
      background-color: #808080
      color: #fff
      border: 2px solid #DCDCDC
    .van-collapse
      .van-collapse-item
        .desc
          display: flex
          height: 240px
          .img
            display: flex
            float: left
            margin: 10px 0
            width: 220px
            height: 220px
            align-items: center
            justify-content: center
          .info
            flex: 1
            display: flex
            margin-left: 5px
            background-color: floralwhite
            .info-left
              float: left
              width: 60%
              height: 100%
              .info-left-one
                height: 25%
                line-height: 40px
                border: 1px solid #eee
              .info-left-two
                width: 100%
                height: 25%
                line-height: 40px
              .info-left-three
                width: 100%
                height: 50%
                line-height: 80px
                border: 1px solid #eee
            .info-right
              flex: 1
              max-width: 240px
              border: 1px solid #eee
              .info-right-one
                height: 25%
                line-height: 40px
                padding-left: 30px
                border: 1px solid #eee
              .info-right-two
                width: 100%
                height: 25%
                line-height: 40px
                padding-left: 30px
              .info-right-three
                width: 100%
                height: 50%
                line-height: 120px
                text-align: center
                border: 1px solid #eee
                .van-button
                  width: 92px
                  height: 56px
                  line-height: 56px
                  font-size: 16px
                  padding: 0
                  background-color: forestgreen
                  border: 5px solid orangered
    .dialog-content
      width: 100%
      height: 480px
      .dialog-content-one
        display: flex
        margin-top: 20px
        height: 20%
        line-height: 96px
      .dialog-content-two
        display: flex
        height: 20%
        line-height: 96px
        .dialog-content-two-left
          display: flex
          float: left
          width: 50%
        .dialog-content-two-right
          display: flex
          flex: 1
      .dialog-content-three
        margin: 20px 5px
        height: 50%
        border-radius: 20px
        border: 5px solid #eee
    .fab-main-container
      right: 32% !important
      bottom: 32% !important
</style>
